<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="teams" label="对阵" width="220">
        <template #default="scope" >
          <el-tag type="success">{{ scope.row.homeTeamName }}</el-tag>
            vs
          <el-tag>{{ scope.row.awayTeamName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="matchDate" label="比赛时间" width="180" />
      <el-table-column prop="raceOrder" label="场序" width="50" />
      <el-table-column prop="matchAddress" label="场地" />
      <el-table-column label="填报单" width="200">
        <template #default="scope">
          <el-button @click="handlePreview(scope.row.homeTeamId, scope.row.raceScheduleId)">{{ scope.row.homeTeamName }}填报单打印</el-button>
          <el-button @click="handlePreview(scope.row.awayTeamId,scope.row.raceScheduleId)">{{ scope.row.awayTeamName }}填报单打印</el-button>
        </template>
      </el-table-column>
      <el-table-column label="首发名单" width="200">
        <template #default="scope">
          <el-button 
            @click="handleFirstEdit(scope.row.raceScheduleId, scope.row.homeTeamId)"
          >{{ scope.row.homeTeamName }}首发名单编辑</el-button>
          <el-button 
          @click="handleFirstEdit(scope.row.raceScheduleId, scope.row.awayTeamId)"
          >{{ scope.row.awayTeamName }}首发名单编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column label="打印预览" width="180">
        <template #default="scope">
          <el-button @click="handlePreviewDoc(scope.row.teamStartingListPath)">首发名单打印/预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 打印预览 -->
    <el-dialog
      v-model="dialogVisible"
      width="70%"
    >
      <VueOfficeExcel
        v-if="previewState.type === 1"
        style="height: 50vh;"
        :src="previewState.url"
      />
      <VueOfficeDocx
        v-if="previewState.type === 2"
        style="height: 50vh;"
        :src="previewState.url"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleDownload">
            下载
          </el-button>
          <el-button @click="dialogVisible = false" style="margin-left: 10px;">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 首次名单编辑 -->
    <FirstEditorDialog ref="firstEditorRef" :getTableData="getTableData" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router';
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

import FirstEditorDialog from './components/firstEditorDialog.vue'
import { findRaceScheduleList, getTeamFile } from '@/api/match'
import { ElMessage } from "element-plus";

const route = useRoute();
const firstEditorRef = ref()
const dialogVisible = ref(false)
const previewState = reactive({
  type: 1,  // 1. excel, 2 docs
  url: '',
  name: ''
})
const tableData = ref<any[]>([])

const getTableData = () => {
  findRaceScheduleList({
    raceId: route.query.id
  }).then(res => {
    tableData.value = res.data
  })
}
getTableData()

// 预览
const handlePreview = (teamId: number, raceScheduleId: number) => {
  dialogVisible.value = true
  previewState.type = 1
  getTeamFile({
    raceScheduleId: raceScheduleId,
    teamId: teamId
  }).then(res => {
    previewState.url = res.msg
  })
}

const handlePreviewDoc = (url: string) => {
  if(!url) {
    ElMessage.warning("请先进行首发名单编辑");
    return false
  }
  dialogVisible.value = true
  previewState.type = 2
  previewState.url = url
}

// 下载
const handleDownload = () => {
  
  var a = document.createElement("a");
  a.href = previewState.url;
  a.style.display = "none";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

// 首发名单编辑
const handleFirstEdit = (raceScheduleId: number, teamId: number) => {
  const params = {
    raceScheduleId: raceScheduleId,  // 赛程id
    teamId: teamId
  }
  firstEditorRef.value.handleShow(params)
}
</script>

<style lang="scss" scoped>
.el-button+.el-button {
  margin-left: 0;
  margin-top: 5px;
}
</style>
